<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="select2.css">
	<script src="jquery.min.js"></script>
	<script src="select2.min.js"></script>
</head>

<body>
<!-----------------------------------最基础的选择框--------------------------------------------->
<h2>最基础的选择框</h2>
<select id="e1">
	<option value=""></option><!-- 如果不放一个空的option 那个选项会默认显示第一个-->
	<option value="AK">Alaska</option>
	<option value="HI">Hawaii</option>
	<option value="CA">California</option>
	<option value="NV">Nevada</option>
	<option value="OR">Oregon</option>
	<option value="WA">Washington</option>
</select>
<script type="text/javascript">
	$(function(){
		$("#e1").select2({
			placeholder: "请选择一款产品",
			//这里指定宽度要带‘px’
			width:'300px'
		});
	});
</script>

<!-------------------------------------带子类的选择框------------------------------------------->
<h2>带子类的选择框</h2>
<select id="e2">
	<option></option>
	<optgroup label="这里是大类的标题">
		<option value="AK">Alaska</option>
		<option value="HI">Hawaii</option>
	</optgroup>
	<optgroup label="这里也是大类的标题">
		<option value="CA">California</option>
		<option value="NV">Nevada</option>
		<option value="OR">Oregon</option>
		<option value="WA">Washington</option>
	</optgroup>
</select>
<script type="text/javascript">
$(function(){
	$("#e2").select2({
		width:'300px',
		placeholder: "请选择一款产品",
		allowClear:true// 是否出现删除按钮 注意必须要设置placeholder才会有效果
	});
});
</script>
<!-------------------------------------带标签的选择框------------------------------------------->
<h2>带标签的选择框</h2>
<div id="e3"> <!-- 设置为div 就不会有select箭头标志了 end -->

</div>
<script type="text/javascript">
$(function(){
	$("#e3").select2({
		width:'300px',
		tags:["张三", "李四", "王五"],
		//data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}],
		//openOnEnter:true, //按enter键生成任意字符
		/*ajax:function(){
			 url: "",
			 dataType: 'json',//可以是ajax jsonp 或者ajax自有参数
			 quietMillis: 100,//延迟时间
			 data: function (term, page) {},
			 results: function (data, page) {}
		 },*/
		//minimumInputLength:2,//搜索输入最少字符数
		//minimumResultsForSearch:2,
		//maximumSelectionSize:2//最d多只能出现几个标签
	});
});
</script>
<!-------------------------------------初始带标签的选择框------------------------------------------->
<h2>带标签的选择框</h2>
<input type="text" id="e4" value="111,李四,王五" />
<script type="text/javascript">
$(function(){
	$("#e4").select2({
		width:'300px',
		tags:["张三", "李四", "王五"],
		
	});
});
</script>
</body>